<template>
  <div id="personal-bankinternational">
    <NavBar title="绑定银行卡" left-arrow @click-left="onClickLeft" />
    <div class="bankinternational">
      <div class="bankinternational-body">
        <div class="bindingcard">
          <Icon size="10" color="#f60" name="info" />
          <div class="bindbankcard">绑定银行卡</div>
        </div>
        <Form @submit="onSubmit">
          <Field
            v-model="username"
            name="姓名"
            label="姓名"
            placeholder="请输入姓名"
          />
          <Field
            v-model="cardnumber"
            name="银行卡号"
            label="银行卡号"
            placeholder="请输入银行卡号"
          />
          <Field
            v-model="bankname"
            name="银行名称"
            label="银行名称"
            placeholder="请输入银行名称"
          />
          <Field
            v-model="city"
            name="开户省市"
            label="开户省市"
            placeholder="请输入开户省市"
          />
          <Field
            v-model="branch"
            name="开户网点"
            label="开户网点"
            placeholder="请输入开户网点"
          />
          <Field
            v-model="identity"
            name="身份证"
            label="身份证id"
            placeholder="请输入身份证id（护照）"
          />
          <Field
            v-model="remittance"
            name="国际汇款代码"
            label="国际汇款代码"
            placeholder="请输入国际汇款代码"
          />
          <Field
            v-model="phone"
            name="联系电话"
            label="联系电话"
            placeholder="请输入联系电话"
          />

          <div style="margin: 16px">
            <Button round block type="info" native-type="submit"
              >开户</Button
            >
          </div>
        </Form>
      </div>
    </div>
  </div>
</template>
<script>
import { NavBar, Icon, Form, Field, Button} from "vant";
export default {
  components: {
    NavBar,
    Icon,
    Form,
    Field,
    Button
  },

  data() {
    return {
      username: '', // 姓名
      cardnumber: '', // 银行卡号
      bankname: '', // 银行名称
      city: '', // 开户省市
      branch: '', // 开户网点
      identity: '', // 身份证
      remittance: '', //国际汇款代码
      phone: '', // 联系电话
    };
  },

  // 创建时
  created() {},

  // 方法
  methods: {
    // 跳出
    onClickLeft() {
      console.log("跳出");
      this.$router.go(-1);
    },

    // 点击开户
    onSubmit(values) {
      console.log('submit', values);
    },


    // 网络请求
  },
};
</script>
<style lang="less" scoped>
#personal-bankinternational {
  width: 100vw;
  height: 100vh;
  background-color: #f7f6fb;
  .bankinternational {
    width: 100%;
    background-color: #fff;
    .bankinternational-body {
      width: 345px;
      padding: 20px 15px;
      .bindingcard {
        font-size: 12px;
        color: #f60;
        display: flex;
        align-items: center;
        .bindbankcard {
          margin-left: 4px;
        }
      }
    }
  }
}
</style>
